
<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">            
            <el-form-item label="标题" prop="title" >
                <el-input v-model="form.title" placeholder="请输入标题"  />
            </el-form-item>            
            <el-form-item label="创建者" prop="creatorId" >                
                <el-input v-model="creatorName" placeholder="请选择创建者" :readonly="true" >
                    <el-button slot="append" icon="el-icon-search" @click="creatorIdOpen=true"></el-button>
                </el-input>
                <el-dialog title="从已有创建者中选择或新增创建者" :visible.sync="creatorIdOpen" width="800px" append-to-body :close-on-click-modal="false">
                    <creatorIdRefer ref="creatorIdRefer"                        
                    ></creatorIdRefer>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="creatorIdConfirm">确 定</el-button>
                        <el-button @click="creatorIdCancel">取 消</el-button>
                    </div>
                </el-dialog>                
            </el-form-item>            
            <el-form-item label="原型" prop="protoId" >                
                <el-input v-model="protoTitle" placeholder="请选择原型" :readonly="true" >
                    <el-button slot="append" icon="el-icon-search" @click="protoIdOpen=true"></el-button>
                </el-input>
                <el-dialog title="从已有原型中选择或新增原型" :visible.sync="protoIdOpen" width="800px" append-to-body :close-on-click-modal="false">
                    <protoIdRefer ref="protoIdRefer"                        
                    ></protoIdRefer>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="protoIdConfirm">确 定</el-button>
                        <el-button @click="protoIdCancel">取 消</el-button>
                    </div>
                </el-dialog>                
            </el-form-item>            
        </el-form>        
        <el-tabs type="border-card">            
            <el-tab-pane label="明细">
                <demoEntityItem :entityId="form.id" @before="precreate" ></demoEntityItem>
            </el-tab-pane>            
            <el-tab-pane label="相关人员">
                <demoEntityRelevant :demoEntityId="form.id" @before="precreate" ></demoEntityRelevant>
            </el-tab-pane>            
        </el-tabs>        
    </div>
</template>
<script>
import {
    getDemoEntity,
    createDemoEntity,
    updateDemoEntity,    
    listCreatorId,    
    listProtoId,    
} from "@/api/demo/demoEntity";
import { getUserProfile } from "@/api/system/user";
import {genCode} from '@/api/code.js';
import dayjs from 'dayjs'
export default {
    name: "DemoEntityEditor",
    components:{        
        creatorIdRefer:()=>import("@/views/demo/demoPerson/list/refer.vue"),        
        protoIdRefer:()=>import("@/views/demo/demoEntity/list/refer.vue"),        
        demoEntityItem:()=>import("@/views/demo/demoEntityItem/list/index.vue"),        
        demoEntityRelevant:()=>import("@/views/demo/demoEntityRelevant/list/index.vue"),        
    },
    props: [        
    ],
    data() {
        return {            
            // creatorIdOptions关联表数据
            creatorIdOptions: [],            
            creatorIdOpen:false,
            creatorName: "",            
            // protoIdOptions关联表数据
            protoIdOptions: [],            
            protoIdOpen:false,
            protoTitle: "",            
            // 表单参数
            form: {},
            params: {},
            // 表单校验
            rules: {                
            },
            user:{}
        };
    },
    methods: {
        // 表单重置
        async reset() {            
            // 重新加载选项            
            // 重置表单值
            this.form = {                
                id: undefined,                
                title: undefined,                
                creatorId: undefined,                
                protoId: undefined,                
            };
            // 重置相关参数            
            this.resetForm("form");
        },        
        show(){
            this.reset();
        },        
        // 提前提交
        precreate(){
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (!this.form.id) {
                        createDemoEntity(this.form).then(response => {
                            if (response.code === 0) {
                                this.form.id = response.data.id;
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        // 正常提交
        submitForm: function(done) {
            this.$refs["form"].validate(valid => {
                if (valid) {                    
                    if (this.form.id != undefined) {
                        updateDemoEntity(this.form).then(response => {
                            if (response.code === 0) {
                                this.msgSuccess("修改成功");
                                done()
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        createDemoEntity(this.form).then(response => {
                            if (response.code === 0) {
                                this.msgSuccess("新增成功");
                                done()
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        genCode(){            
        },
        getUser() {
            return getUserProfile().then(response => {
                this.user = response.data;
            });
        },        
        //关联m_demo_person表选项
        getCreatorIdItems() {
            return this.getItems(listCreatorId, {pageSize:10000}).then(res => {
                this.creatorIdOptions = this.setItems(res, 'id', 'name')
            })
        },        
        creatorIdConfirm(){
            let row = this.$refs.creatorIdRefer.referredRow;
            this.form.creatorId = row.id;
            this.creatorName = row.name;
            this.creatorIdOpen = false;
        },
        creatorIdCancel() {
            this.creatorIdOpen = false;
        },        
        //关联m_demo_entity表选项
        getProtoIdItems() {
            return this.getItems(listProtoId, {pageSize:10000}).then(res => {
                this.protoIdOptions = this.setItems(res, 'id', 'title')
            })
        },        
        protoIdConfirm(){
            let row = this.$refs.protoIdRefer.referredRow;
            this.form.protoId = row.id;
            this.protoTitle = row.title;
            this.protoIdOpen = false;
        },
        protoIdCancel() {
            this.protoIdOpen = false;
        },        
    }
};
</script>
<style>    
</style>